import React from 'react';
import { Image, View, Text, StatusBar, TouchableOpacity, StyleSheet, FlatList, ScrollView, Platform } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import { CalendarList, LocaleConfig } from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import { isIPhoneX } from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceWidth, deviceHeight, titleHeight } from '../../../util';
import ReceiveMoneyCell from './components/receiveMoneyCell'
import { inject, observer } from "mobx-react/native"
import HomeManager from '../../../service/Home'



@inject('userAuth')

@observer

export default class ReceiveMoneyTeam extends React.Component {

  refreshing = false;
  hadMore = false;
  pageSize = 20;
  pageIndex = 1;

  constructor(props) {
    super(props);
    this.state = {
      dataArray: []
    }
  }


  componentDidMount = () => {
    this.getDataList();
  }

  getDataList = () => {
    Layer.showLoading()
    HomeManager.fetchTeamUserIncome({
      token: this.props.userAuth.token,
      pageSize: this.pageSize,
      page: this.pageIndex
    }).then((res) => {
      Layer.hiddenLoading()
      this.refreshing = false;
      if (res.status == 'success') {
        let rows = res.data;
        if (this.pageIndex === 1) {
          this.setState({ dataArray: rows });
        } else {
          this.setState({ dataArray: this.state.dataArray.concat(rows) });
        }
        this.hadMore = (rows.length === this.pageSize);
      }
    }).catch((res) => {
      Layer.hiddenLoading()
      this.refreshing = false;
    })
  }
  ListEmptyComponent = () => {
    return (
      <View style={{ height: deviceHeight * 0.6, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 25, color: '#8E8E93', fontWeight: 'bold' }}>暂无数据</Text>
      </View>
    )
  }

  _renderRefresh = () => {
    this.pageIndex = 1;
    this.refreshing = true;
    this.getDataList();
  }
  _onEndReached = () => {
    if (!this.refreshing && this.hadMore) {
      this.pageIndex++;
      this.refreshing = true;
      this.getDataList();
    }
  }

  SeparatorView() {
    return (<View style={{ height: 1, width: deviceWidth, backgroundColor: '#E6E3E6' }} />)
  }
  middleView = (content, title) => {
    return (
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Text style={styles.upText}>{content}</Text>
        <Text style={styles.downText}>{title}</Text>
      </View>
    )
  }
  render() {
    const { real_name_status,balance,income,child} = this.props.userAuth.currentUser
    return (
      <View>
        <NavBar
          title={<Text style={{ fontSize: 18, color: '#fff' }}>分润管理</Text>}
          backgroundColor={'#378EFB'}
          statusBarBgColor={'#fff'}
          barStyle={'light-content'}
          back={() => { navigationhelper.goBack() }}
          leftText={<Text style={{ color: '#fff' }}>返回</Text>}
          LifeImage={require('src/assets/nav/fanhuibaise.png')}
          right={<Text style={{ color: '#fff', fontSize: 16 }}>提现</Text>}
          pressRight={() => {
            if (real_name_status === 1) {
              navigationhelper.push('DrawMoney')
            } else {
              Layer.showMsg('请先实名认证')
            }
          }}
        />
        <View>
          <View style={{ backgroundColor: '#378EFB', justifyContent: 'center', height: 150, alignItems: 'center' }}>
            <Text style={{ color: '#9BC7FD' }}>账户余额</Text>
            <Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 26, marginTop: 10 }}>{balance}</Text>
          </View>

          <View style={{ paddingHorizontal: 40, backgroundColor: '#4B9AFC', justifyContent: 'space-between', height: 60, alignItems: 'center', flexDirection: 'row', }}>
            {this.middleView('累计收益(元)', income.total)}
            {this.middleView('昨日收益(元)', income.yesterday)}
          </View>

          <View style={{ height: 50, justifyContent: 'space-between', alignItems: 'center', marginTop: 10, paddingHorizontal: 20, flexDirection: 'row', backgroundColor: '#fff' }}>

            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
              <Text style={{ color: '#2E2E2E', fontSize: 16, fontWeight: 'bold' }}>邀请好友</Text>
            </View>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={() => {
                navigationhelper.navigate('MyTeamUserManager')
              }} >
              <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ color: '#8E8E93', fontSize: 12, marginLeft: deviceWidth - 190 }}>{'已邀请' + child.child + '人'}</Text>
                <Image style={{ width: 20, height: 20 }} source={require('src/assets/icon_arrow_grey.png')}>
                </Image>
              </View>
            </TouchableOpacity>
          </View>
          <FlatList
            style={{ marginTop: 10, height: deviceHeight - titleHeight - 280 }}
            ListEmptyComponent={this.ListEmptyComponent}
            data={this.state.dataArray}
            keyExtractor={(item, index) => index}
            ItemSeparatorComponent={this.SeparatorView}
            onRefresh={this._renderRefresh}
            onEndReached={this._onEndReached}
            onEndReachedThreshold={0.05}
            //  ListFooterComponent={this.renderFooter}//尾巴
            refreshing={this.refreshing}
            renderItem={({ item }) => {
              return (
                <ReceiveMoneyCell itemData={item} />
              )
            }
            } />
        </View>
      </View>
    )
  }

}

const styles = StyleSheet.create({
  viewStyle: {
    marginTop: 20,
    borderRadius: 10,
    backgroundColor: '#fff',
    marginLeft: 10,
    marginRight: 10,
  },
  viewStyleTwo: {
    marginTop: 20,
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  upText: {
    color: '#9BC7FD',
    fontSize: 12,
  },
  downText: {
    color: '#fff',
    fontSize: 14,
    marginTop: 5,
    fontWeight: 'bold'
  },
  leftView: {
    paddingLeft: 12,
    paddingTop: Platform.OS === 'ios' ? (isIPhoneX() ? 30 : 10) : 0,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },

})